<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
    <title>8天出行-地勤车况系统</title>
    <link rel="stylesheet" href="libs/wuui/weui.min.css" />
    <style type="text/css">
        body{
            background:#f8f8f8;
        }
        .page.pg-top{
            padding-top: 50px;
        }
        .page.pg-bottom{
            padding-bottom: 50px;
        }
        header {
            width: 100%;
            height: 50px;
            background: #01ace9;
            position: fixed;
            top: 0;
            z-index: 3;
        }
        header .back:before {
            content: " ";
            display: inline-block;
            height: 10px;
            width: 10px;
            border-width: 0 0 2px 2px;
            border-color: #fff;
            border-style: solid;
            -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        }

        header a.placeholder {
            display: block;
            padding: 0 20px
        }

        header .placeholder {
            margin: 0;
            height: 50px;
            line-height: 50px;
            background: none;
            font-size: 16px;
            color: #fff;
        }


        .myupload {
            display: flex;
            flex-direction: column;
            /*padding: 15px 15px 10px 15px;*/
        }
        .myupload div.pic-list{
            display: flex;
            justify-content: space-between;
            /*margin-bottom: 10px;*/
            background: #fff;
            padding: 0 5px;
            border-bottom: 1px solid #e5e5e5;
        }
        /*.myupload div.pic-list .before{
            margin-right: 10px;
        }*/
        .myupload div.pic-list .before, .myupload div.pic-list .after{
            padding: 10px 10px 15px;
            flex-grow: 2;
            color: #666;
        }
        .myupload div.pic-list a{
            color: #666;
        }
        .myupload div.pic-list .header{
            justify-content: flex-start;
            font-size: 13px;
        }
        .myupload div.pic-list .header .sub{
            font-size: 12px;
            margin-left: 5px;
        }
        .myupload div.pic-list .image{
            display: flex;
            border: 1px solid #d9d9d9;
            width: 100%;
            height: 100px;
        }

        .myupload div.pic-list .after .upload-after{
            display: flex;
            position: relative;
            height: 100px;
        }
        .myupload div.pic-list .after .nodate{
            display: inline-block;
            width:60px;
        }
        .myupload div.pic-list .after .upload-after:before, .myupload div.pic-list .after .upload-after:after{
            content: " ";
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            background-color: #d9d9d9;
        }
        .myupload div.pic-list .after .upload-after:before{
            width: 2px;
            height: 39.5px;
        }
        .myupload div.pic-list .after .upload-after:after{
            width: 39.5px;
            height: 2px;
        }
        .car{
            display: flex;
            flex-direction: row;
            color: #333;
            /*background: #E6E6EA;*/
            background:#f8f8f8;
            color: #FC444C;
            position: relative;
            padding: 5px 15px;
            font-size: 14px;
        }
    </style>
</head>

<body ontouchstart>

<header>
    <div class="weui-flex">
        <div>
            <div><a href="javascript:history.go(-1);" class="placeholder back">返回</a></div>
        </div>
    </div>
</header>

<section class="content page pg-top pg-bottom myupload">
    <div id="loading" class="weui-loadmore" style="display: none;">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>

    <div id="nodata" class="weui-loadmore weui-loadmore_line" style="display: none;">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>

    <div id="pic-items">

        <!--<div>sad</div>-->

        <!--<div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd">处理前</div>
            <div class="weui-panel__bd pic">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__bd">
                        <div id="beforeImage" class="loadImg">
                            <embed src="img/default.svg" style="width: 30px;height: 30px"/>
                        </div>

                        <p id="beforeDesc"></p>
                        <p id="beforeTime" class="weui-media-box__desc"></p>
                    </div>
                </div>
            </div>
        </div>-->

    </div>

</section>

<script type="text/javascript" src="libs/jquery-2.2.3.min.js" charset="UTF-8"></script>
<!--weui.js需要在body里面加载才起作用-->
<script type="text/javascript" src="libs/weui.js/weui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/app.js" charset="UTF-8"></script>
<script type="text/javascript">
    $(function(){
        var $picItems = $('#pic-items'),
            car = app.getJSONSessionStorage('car')
        user = app.getJSONSessionStorage('user');

        /*if(null == user) {
            window.location.replace('login.html');
        }*/
        $('#nodata').hide();
        $('#loading').show();
        $.ajax({
            type:"get",
            url:"/api/tukuan/mobile/car/manager/myCarStateList",
            data: {"userId": user.id, 'isHarm': 1, 'sortName': 'cs.create_time', 'sortOrder': 'desc'},
            success: function(result){
                $('#loading').hide();

                var carEle = [
                    '<div class="car">{1}</div>'
                ];

                var before = [
                    '<div class="pic-list">',
                    '	<div class="before">',
                    '		<div class="header">处理前<small class="sub">2017-6-26</small></div>',
                    '		<a href="my_after_upload.html?carStateId={1}&carId={4}&carNum={5}" class="image" style="background: url({2}); background-repeat: no-repeat; background-size: 100% 100%;"></a>',
                    '	</div>',
                    '	<div class="after">',
                    '		<a href="my_after_upload.html?carStateId={3}&carId={6}&carNum={7}">',
                    '			<div class="header">处理后<small class="sub nodate"></small></div>',
                    '			<div class="image upload-after"></div>',
                    '		</a>',
                    '	</div>',
                    '</div>'
                ];
                var after = [
                    '<div class="pic-list">',
                    '	<div class="before">',
                    '		<div class="header">处理前<small class="sub">2017-6-26</small></div>',
                    '		<a href="my_detail.html?carStateId={1}&carId={5}&carNum={6}" class="image" style="background: url({3}); background-repeat: no-repeat; background-size: 100% 100%;"></a>',
                    '	</div>',
                    '	<div class="after">',
                    '		<div class="header">处理后<small class="sub">2017-6-26</small></div>',
                    '		<a href="my_detail.html?carStateId={2}&carId={7}&carNum={8}" class="image" style="background: url({4}); background-repeat: no-repeat; background-size: 100% 100%;"></a>',
                    '	</div>',
                    '</div>'
                ];

                console.log(result.list);
                console.log(result.total);

                if(result.total > 0) {
                    $.each(result.list, function(i, p) {
                        $picItems.append(app.format(carEle.join(''), p.carFullNum));
                        if(p.carStates.length > 0) {
                            $.each(p.carStates, function(si, sp) {
                                if(undefined == sp.afterImageUrl || "" == sp.afterImageUrl) {
                                    $picItems.append(app.format(before.join(''), sp.id, sp.beforeImageUrl, sp.id, p.id, p.carFullNum, p.id, p.carFullNum)) ;
                                } else {
                                    $picItems.append(app.format(after.join(''), sp.id, sp.id, sp.beforeImageUrl, sp.afterImageUrl, p.id, p.carFullNum, p.id, p.carFullNum)) ;
                                }
                            })
                        }
                    })
                } else {
                    $('#nodata').show();
                }

                /*if(result.total > 0) {
                    $.each(result.rows, function(i, p) {
                        if(undefined == p.afterImageUrl || "" == p.afterImageUrl) {
                            $picItems.append(app.format(before.join(''), p.id, p.beforeImageUrl, p.id)) ;
                        } else {
                            $picItems.append(app.format(after.join(''), p.id, p.id, p.beforeImageUrl, p.afterImageUrl)) ;
                        }
                    })
                } else {
                    $('#nodata').show();
                }*/
            },
            error: function(){
            }
        });

    });
</script>
</body>

</html>